<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<!--数据的显示 表达式和 v-text指令-->
		{{message}}
		<span v-text="info"></span>
		<!--双向数据绑定-->
		<input type="text" name="" id="" value="" v-model='info'/>
		<!--数组循环-->
		<ul>
			<li v-for="(v,index) in lists">{{index+1}}---{{v.id}}---{{v.title}}</li>
		</ul>
		<!--触发事件-->
		<button v-on:click="go()">点击</button>
		<!--简写-->
		<button @click="run()">点击2</button>
		<!-- 循环数组 -->
		
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
			//数据
			message:'hello world',
			info:'我是Vue',
		lists:[
			  {id:1,title:'吃饭'},
			  {id:2,title:'不吃'},
			  {id:3,title:'睡觉'},
			  {id:4,title:'困'},
			  {id:5,title:'想睡觉'},
		       ]
		},
		methods:{
			go(){
				alert(111)
			},
			run(){
				alert(222)
			}
		}

//		$scope.message='hello word'
//		$scope.message='hello word'
	})
</script>
</html>
